<template>
  <div>
    <el-steps :active="currentStep" align-center>
      <el-step title="确认申请信息"></el-step>
      <el-step title="注册完成"></el-step>
    </el-steps>

    <div class="alert__wrapper">
      <div v-show="currentStep == STEP_FORM">
        <el-alert v-if="validateMasterControlIdLoading" title="主控ID检测中..." type="warning" />
        <el-alert v-else :title="masterControlIdTitle" :type="masterControlIdValid ? 'success' : 'error'" show-icon :closable="false" />
      </div>
    </div>
    
    <div class="content">
      <el-descriptions :column="1">
        <el-descriptions-item label="主控ID">
          <div>
            <div>{{ info.masterControlId }}</div>
            <div class="block">
              <el-descriptions :column="2">
                <el-descriptions-item label="产品">{{ info.productionName }}</el-descriptions-item>
                <el-descriptions-item label="APP Key">{{ info.appKey }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="注册类型">{{ transformDisplayName(dict_deviceRegisterType, info.registerType) }}</el-descriptions-item>
        <el-descriptions-item label="注册申请时间">{{ format_dateTime(info.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="注册信息" v-if="currentStep === STEP_COMPLETE">
          <div class="register-info">
            <el-descriptions :column="2">
              <el-descriptions-item label="设备统一ID">{{ id }}</el-descriptions-item>
              <el-descriptions-item label="DeviceName">{{ id }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1">
              <el-descriptions-item label="登录密钥">{{ id }}</el-descriptions-item>
              <el-descriptions-item label="消息密钥">{{ id }}</el-descriptions-item>
              <el-descriptions-item label="签名密钥">{{ id }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <div class="actions">
        <el-button v-show="currentStep !== STEP_COMPLETE" type="primary" @click="register" :disabled="actionDisabled" :loading="registerLoading">注册</el-button>
        <el-button v-show="currentStep === STEP_FORM" @click="cancel">取消</el-button>
        <!-- <el-button v-show="currentStep !== STEP_FORM" @click="prev" :disabled="actionDisabled">上一步</el-button> -->
        <el-button v-show="currentStep == STEP_COMPLETE" type="primary" @click="complete" :disabled="actionDisabled" >完成</el-button>
      </div>
    </div>

  </div>
</template>


<script>
import { transformDisplayName, dict_deviceRegisterType } from '@/utils/dictionary'
import { format_dateTime } from '@/utils/formatter'

import { deviceRegisterDetailApi } from '@/api/modules/device/register'
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      dict_deviceRegisterType,

      STEP_FORM: 0,
      STEP_COMPLETE: 1,

      currentStep: 0,

      info: {
        id: -1,
        masterControlId: '',
        productionName: '',
        appKey: '',
        deviceName: '',
        registerType: -1,
        createTime: null
      },

      masterControlIdTitle: '',
      masterControlIdValid: false,
      validateMasterControlIdLoading: false,

      registerLoading: false,

      actionDisabled: true
    }
  },
  methods: {
    transformDisplayName,
    format_dateTime,

    async getRegisterDetail () {
      const params = {
        id: this.id
      }
      // const { data } = await deviceRegisterDetailApi(params)

      const data = {
        id: 1,
        masterControlId: 'SADF-465Q-F6A5-W1Q3',
        productionName: '设备A',
        appKey: 'T1_RM_4G_1P1',
        deviceName: 't1rm4g1p1_',
        registerType: 0,
        createTime: '2022-11-17T07:04:07.641Z'
      }
      this.info = { ...data }
    },

    async next () {
      this.currentStep++
    },
    prev () {
      this.currentStep--
    },

    async validateMasterControlId () {
      this.validateMasterControlIdLoading = true
      try {
        const params = {

        }
        // const { data, message } = await validateMasterControlIdApi(params)
        const data = true
        const message = '注册失败，主控ID不存在'
        setTimeout(() => {
          if(data) {
            this.masterControlIdTitle = '注册申请正常：主控ID存在；主动ID未注册，设备可注册'
            this.masterControlIdValid = true
            this.actionDisabled = false
          } else {
            this.masterControlIdTitle = message
            this.masterControlIdValid = false

          }
          this.validateMasterControlIdLoading = false
        }, 1000)
      } catch (err) {}
    },

    async register () {
      this.registerLoading = true

      // await

      setTimeout(() => {
        this.registerLoading = false
        this.currentStep = this.STEP_COMPLETE

      }, 2000)
    },

    complete () {
      this.$emit('complete')
    },
    cancel () {
      this.$emit('close')
    },
  },
  mounted () {
    this.getRegisterDetail()
    this.validateMasterControlId()
  }
}
</script>

<style lang="less" scoped>

.alert__wrapper {
  max-width: 700px;
  padding-top: 24px;
  margin: 0 auto;
}
.content {
  max-width: 700px;
  margin: 24px auto;

  :deep(.el-descriptions-item__label) {
    min-width: 100px;
  }

  .block {
    background-color: rgb(242, 242, 242);
    box-sizing: border-box;
    padding: 24px 24px 12px 24px;
    margin: 12px 0;
    .el-descriptions {
      :deep(.el-descriptions-item__label) {
        min-width: 50px;
      }
      :deep(.el-descriptions__body) {
  
        background-color: transparent;
      }
  
    }
  }
  .register-info {
    border: 1px solid #CCC;
    box-sizing: border-box;
    padding: 24px;
    :deep(.el-descriptions-item__label) {
      min-width: 80px;
    }
  }

  .actions {
    padding-left: 100px;
    padding-top: 24px;
  }
}
</style>